<template>
  <div class="page-bar">
    <div id="divTable">
      <slot name="search"></slot>
      <div class="table_div">
        <table
          border="1"
          cellpadding="4"
          cellspacing="0"
          style="color:#333333; width:100%; border-collapse:collapse;"
        >
          <thead>
            <tr
              align="center"
              style="border-width:1px;border-style:solid;font-weight:bold;"
            >
              <th scope="col">
                员工编码
              </th>
              <th scope="col">
                员工姓名
              </th>
              <th>
                客户编码
              </th>
              <th scope="col">
                客户名称
              </th>
              <th scope="col">
                客户地址
              </th>
              <th scope="col">
                申请类型
              </th>
              <th scope="col">
                开始偏差
              </th>
              <th scope="col">
                结束偏差
              </th>
              <th scope="col">
                申请状态
              </th>
              <th scope="col">
                提交申请
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in list"
              :key="item.id"
              @click="changeItem($event, index)"
              :class="(index) === activeIdx && checkedItem ? 'isActive' : '' "
            >
              <td>
                {{ item.employeeName }}
              </td>
              <td>
                <div style="width:80px;">
                  {{ item.employeeCode }}
                </div>
              </td>
              <td>
                <div style="width:80px;">
                  {{ item.customerName }}
                </div>
              </td>
              <td>
                <div style="width:300px;">
                  {{ item.customerCode }}
                </div>
              </td>
              <td>
                <div style="width:140px;">
                  {{ item.customerAddress }}
                </div>
              </td>
              <td>
                <div style="width:120px;">
                  {{ item.visitType }}
                </div>
              </td>
              <td>
                <div style="width:80px;">
                  {{ item.startOffset }}
                </div>
              </td>
              <td>
                <div style="width:80px;">
                  {{ item.endOffset }}
                </div>
              </td>
              <td align="center">
                <label>{{ item.visitState }}</label>
              </td>
              <td align="center">
                <label>{{ item.visitOperation }}</label>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="page-list">
      <span
        class="page-item first-page"
        :class="{disabled: currentPage === 1}"
        v-on:click="btnClick(1)"
      ></span>
      <span
        class="page-item prve-page"
        :class="{disabled: currentPage === 1}"
        v-on:click="prvePage(currentPage)"
      ></span>
      <!--<span class="page-ellipsis" v-if="showPrevMore" >...</span>-->
      <span
        class="page-item"
        v-for="page in indexs"
        :key="page"
        v-bind:class="{ active: currentPage == page }"
        v-on:click="btnClick(page)"
      >
        {{ page &lt; 1 ? "..." : page }}
      </span>
      <!--<span class="page-ellipsis" v-if="showNextMore">...</span> -->
      <span
        class="page-item next-page"
        :class="{disabled: currentPage === totalPage}"
        v-on:click="nextPage(currentPage)"
      ></span>
      <span
        class="page-item last-page"
        :class="{disabled: currentPage === totalPage}"
        v-on:click="btnClick(totalPage)"
      ></span>
      <select
        class="page-select form-control"
        v-model="pagesize"
      >\
        <option
          v-for="size in pageSizeArray"
          :key="size"
          :value="size"
        >{{ size }}条/页</option>
      </select>
      <span class="ml20"></span>
      <span class="page-jump-to"><input
          type="type"
          v-model="jumpPageNumber"
        ></span>
      <span>页</span>
      <span
        class="page-item jump-go-btn"
        @click="btnClick(jumpPageNumber)"
      >跳转</span>
      <span>{{ currentPage }}/{{ totalPage }}</span>
    </div>
    <div class="slot-div">
      <slot></slot>
      <slot name="title"></slot>
      <slot name="list"></slot>
      <ul>
        <li
            v-for="todo in filteredTodos"
            v-bind:key="todo.id"
        >
            <span v-if="todo.isComplete">✓</span>
            <span v-else>{{ todo.text }}</span>
            <!--
            我们为每个 todo 准备了一个插槽，
            将 `todo` 对象作为一个插槽的 prop 传入。
            此为vue2.6版本新方法，当前为vue2.5版本
            <slot name="todo" v-bind:todo="todo">
                后备内容
                {{ todo.text }}
            </slot>-->
        </li>
        </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: this.cur,
      pagesize: this.pageSizeArray[0],
      jumpPageNumber: 1,
      activeIdx: 0,
      checkedItem: false,
      showPrevMore: false,
      showNextMore: false,
      list: [
        {
          id: 1,
          employeeName: "a",
          employeeCode: 2,
          customerName: "安徽省安庆市第四人民医院",
          customerCode: 1,
          customerAddress: 1,
          startTime: "2020-07-16",
          endTime: "2020-07-16",
          visitType: "记录偏差",
          startOffset: "安徽省",
          endOffset: "安庆市",
          latitude: 100.34,
          longitude: 200.87,
          visitState: "大观区",
          visitOperation: "POV",
          visitDesc: "这里是拜访记录补充的描述"
        },
        {
          id: 2,
          employeeName: "b",
          employeeCode: 2,
          customerName: "安徽省安庆市第四人民医院",
          customerCode: 1,
          customerAddress: 1,
          startTime: "2020-07-16",
          endTime: "2020-07-16",
          visitType: "记录偏差",
          startOffset: "安徽省",
          endOffset: "安庆市",
          latitude: 100.34,
          longitude: 200.87,
          visitState: "大观区",
          visitOperation: "POV",
          visitDesc: "这里是拜访记录补充的描述"
        },
        {
          id: 3,
          employeeName: "c",
          employeeCode: 2,
          customerName: "安徽省安庆市第四人民医院",
          customerCode: 1,
          customerAddress: 1,
          startTime: "2020-07-16",
          endTime: "2020-07-16",
          visitType: "记录偏差",
          startOffset: "安徽省",
          endOffset: "安庆市",
          latitude: 100.34,
          longitude: 200.87,
          visitState: "大观区",
          visitOperation: "POV",
          visitDesc: "这里是拜访记录补充的描述"
        },
        {
          id: 4,
          employeeName: "d",
          employeeCode: 2,
          customerName: "安徽省安庆市第四人民医院",
          customerCode: 1,
          customerAddress: 1,
          startTime: "2020-07-16",
          endTime: "2020-07-16",
          visitType: "记录偏差",
          startOffset: "安徽省",
          latitude: 100.34,
          longitude: 200.87,
          endOffset: "安庆市",
          visitState: "大观区",
          visitOperation: "POV",
          visitDesc: "这里是拜访记录补充的描述"
        }
      ],
      filteredTodos: [
          {
            id: 1,
            isComplete: true,
            text: 'A'
          },
          {
            id: 2,
            isComplete: false,
            text: 'B'
          },
          {
            id: 3,
            isComplete: true,
            text: 'C'
          },
          {
            id: 4,
            isComplete: true,
            text: 'D'
          }
      ]
    };
  },
  props: {
    cur: {
      //当前页面
      type: Number,
      default: 1
    },
    pageSizeArray: {
      //每页显示数量
      type: Array,
      default() {
        return [10, 20, 25, 30, 50];
      }
    },
    all: {
      //总条数
      type: Number,
      default: 1000
    },
    pageGroup: {
      // 连续页码个数
      type: Number,
      default: 10
    }
  },
  computed: {
    totalPage() {
      //总页数
      return Math.ceil(this.all / this.pagesize);
    },
    indexs: function() {
      const totalPage = this.totalPage;
      const groupArray = [];
      const pageGroup = this.pageGroup;
      const _offset = pageGroup / 2;
      let current = this.currentPage;
      const offset = {
        start: current - _offset,
        end: current + _offset
      };
      if (offset.start < 1) {
        offset.end = offset.end + (1 - offset.start);
        offset.start = 1;
      }
      if (offset.end >= totalPage) {
        offset.start = offset.start + 1 - (offset.end - totalPage);
        offset.end = totalPage + 1;
      }
      if (offset.start < 1) offset.start = 1;
      this.showPrevMore = offset.start > 1;
      this.showNextMore = offset.end < totalPage;
      for (let i = offset.start; i <= offset.end - 1; i++) {
        groupArray.push(i);
      }
      return groupArray;
    }
  },
  methods: {
    // 页码点击事件
    btnClick: function(pageNumber) {
      console.log(pageNumber);
      if (pageNumber < 1 || pageNumber > this.totalPage) {
        swal("页码不符合");
        this.jumpPageNumber = 1;
        return;
      }
      this.currentPage = parseInt(pageNumber);
      //父组件通过change方法来接受当前的页码
      this.$emit("btn-click", {
        currentPage: this.currentPage,
        currentSize: this.pagesize
      });
    },
    // 下一页
    nextPage: function(data) {
      if (this.currentPage >= this.totalPage) return;
      this.btnClick(this.currentPage + 1);
    },
    // 上一页
    prvePage: function(data) {
      if (this.currentPage <= 1) return;
      this.btnClick(this.currentPage - 1);
    },
    // 设置按钮禁用样式
    setButtonClass: function(isNextButton) {
      if (isNextButton) {
        return this.currentPage >= this.all ? "page-button-disabled" : "";
      } else {
        return this.currentPage <= 1 ? "page-button-disabled" : "";
      }
    },
    changeItem(event, idx) {
      /* 单选 */
      this.checkedItem = !this.checkedItem;
      if (this.activeIdx != idx) {
        this.checkedItem = true;
      }
      this.activeIdx = idx;
    }
  },
  watch: {
    pagesize(newValue, oldValue) {
      if (newValue !== oldValue) {
        if (this.currentPage >= this.totalPage) {
          //当前页面大于总页面数
          this.currentPage = this.totalPage;
        }
        this.btnClick(1);
      }
    }
  }
};
</script>
<style scoped>
/* 表格部分 */
#divTable table tbody {
  font-size: 14px;
}

#divTable table tr {
  border: 1px solid gray;
  height: 28px;
}

#divTable table td {
  padding: 4px;
}

#divTable table thead tr {
  background-color: #eeeeee;
  z-index: 10;
}

#divTable table th {
  text-align: center;
  font-size: 9px;
  font-weight: bold;
  font-family: "宋体";
  color: #333333;
}

#divTable table tbody tr td div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#divTable table tbody tr:nth-child(odd) {
  background-color: rgb(239, 243, 251);
}

#divTable table tbody tr:hover {
  background-color: rgb(245, 245, 173);
  color: rgb(255, 102, 204);
}

#divTable table tbody tr img:hover {
  cursor: pointer;
}

#divTable input[type="checkbox"] {
  background-color: initial;
  cursor: default;
  -webkit-appearance: checkbox;
  box-sizing: border-box;
  margin: 3px 3px 3px 4px;
}

#divTable table tbody tr.isActive {
  background-color: rgb(173, 223, 228);
  color: white;
}
/* end表格 */

/* ul,
li {
  margin: 0px;
  padding: 0px;
} */

.page-bar {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-button-disabled {
  color: #ddd !important;
}

.page-bar li {
  list-style: none;
  display: inline-block;
}

.page-bar li:first-child > a {
  margin-left: 0px;
}

.page-bar a {
  border: 1px solid #ddd;
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  cursor: pointer;
}

.page-bar a:hover {
  background-color: #eee;
}

.page-bar .active a {
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}

.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}

.page-helper {
  font-weight: 500;
  height: 40px;
  text-align: center;
  color: #888;
  margin: 10px auto;
}

.page-list {
  font-size: 0;
  height: 28px;
  line-height: 28px;
  font-family: "宋体";
  text-align: right;
  margin-top: 15px;
}

.page-list span {
  font-size: 14px;
  margin-right: 5px;
  user-select: none;
}

.page-list .page-item {
  border: 1px solid #aaa;
  padding: 5px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  color: #0000ee;
}

.page-list .page-item.active {
  color: #000000;
}

.page-list .page-item.first-page {
  background: url("../../assets/page/page-first.gif") no-repeat center center;
}

.page-list .page-item.first-page.disabled {
  background: url("../../assets/page/page-first-disabled.gif") no-repeat center
    center;
}

.page-list .page-item.last-page {
  background: url("../../assets/page/page-last.gif") no-repeat center center;
}

.page-list .page-item.last-page.disabled {
  background: url("../../assets/page/page-last-disabled.gif") no-repeat center
    center;
}

.page-list .page-item.prve-page {
  background: url("../../assets/page/page-prev.gif") no-repeat center center;
}

.page-list .page-item.prve-page.disabled {
  background: url("../../assets/page/page-prev-disabled.gif") no-repeat center
    center;
}

.page-list .page-item.next-page {
  background: url("../../assets/page/page-next.gif") no-repeat center center;
}

.page-list .page-item.next-page.disabled {
  background: url("../../assets/page/page-next-disabled.gif") no-repeat center
    center;
}

.page-ellipsis {
  padding: 0 8px;
}

.page-jump-to input {
  width: 30px;
  height: 18px;
  font-size: 13px;
  border: 1px solid #aaa;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 2px;
  text-align: center;
}

.page-list .jump-go-btn {
  font-size: 12px;
  color: #0000ee;
}

.page-select {
  border: 1px solid #aaa;
  padding: 5px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
  margin-left: 5px;
}

.page-list .page-item .disabled {
  pointer-events: none;
  background: #ddd;
}

.page-list .page-current {
  cursor: default;
  color: #fff;
  background: #337ab7;
  border-color: #337ab7;
}

ul,
li,
span,
input,
select {
  margin: 0;
  padding: 0;
}

.disabled {
  outline: 0 none;
  cursor: default;
  opacity: 0.4;
  /*filer:alpha(opacity=40);*/
  pointer-events: none;
}

.slot-div {
  background: #ffddff;
}
</style>
